<template>
  <div class="capital">
    <div class="top">
      <div class="left">
        <div class="block">
          <span class="demonstration" style="color: #30383e;font-size: 14px;">时间范围：</span>
         <el-date-picker v-model="ptime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></el-date-picker>
        </div>
        <!-- <span></span>
        <div class="block">
          <el-date-picker v-model="endTime" type="date" placeholder="选择日期" style="width: 152px;"></el-date-picker>
        </div> -->
        <div class="left_last">
          <span>复投类型：</span>
          <v-numodule :list='["复投余额","奖金余额"]' ref='futouStyle'></v-numodule>
          <span>选择类型：</span>
          <v-numodule :list='["未审核","已审核","已驳回"]' ref='checkStyle'></v-numodule>
          <button @click="onCheck">查询</button>
          <button @click="onReset">重置</button>
        </div>
        <div class="left_last">
          <button @click='goRouter'>申请复投</button>
        </div>
      </div>
    </div>
    <div class="capital_table">
      <div class="moddle">
        <v-table :list="list" :tableData="tableData" ></v-table>
      </div>
    </div>
    <div class="bottom">
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"  :page-size="10" prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper, total" :total='total'></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import table from "../common/table.vue";
import numoudle from "../common/numodule.vue";
import $ from "jquery"
import { Message } from "element-ui";
export default {
  components: {
    "v-table": table,
    "v-numodule": numoudle
  },
    watch: {
    ptime: function(newTime) {
      if (!newTime) return;
      this.startTime = t.gshDate(newTime[0]);
      this.endTime = t.gshDate(newTime[1]);
    },

  },
  created() {
    this.$parent.flag = true;
    this.chushihua();
  },
  mounted() {

  },
  methods: {
     goRouter(){
      this.$router.push({path:"/cast"})
    },
    handleSizeChange(val) {
    },
    handleCurrentChange(val) {
      this.currentCount = (val - 1) * 10;
      this.chushihua();
    },

    chushihua() {
      u.futou(
        {
          currentCount: this.currentCount,
          pageSize: this.pageSize
        },
        data => {
          if (!data || !data.data || !data.data.allRecastList) return;
          this.total = data.data.total;
          this.tableData = data.data.allRecastList.map(el => {
            return {
              tda: el.loginName,
              tdb: el.phone,
              tdc: el.trueName,
              tdd: el.costNum,
              tde: el.typeString,
              date: el.createTime,
              tdf: el.exchangeAccount,
              tdg: el.statusString
            };
          });
          // this.total = Math.ceil(data.data.total / 10);
        }
      );
    },

    // 查询
    onCheck() {

      if (this.$refs.futouStyle.value == "佣金复投") {
        this.checkType = 0;
      } else {
        this.checkType = 1;
      }

      if (this.$refs.checkStyle.value == "未审核") {
        this.status = 0;
      } else if (this.$refs.checkStyle.value == "已审核") {
        this.status = 1;
      } else if (this.$refs.checkStyle.value == "已驳回") {
        this.status = 2;
      }
      u.futouStyle(
        {
          createTime: this.startTime,
          endTime: this.endTime,
          status: this.status,
          type: this.checkType
        },
        data => {
          this.total = data.data.total;
          this.tableData = data.data.fontRecastList.map(el => {
            return {
              tda: el.loginName,
              tdb: el.phone,
              tdc: el.trueName,
              tdd: el.costNum,
              tde: el.typeString,
              date: el.createTime,
              tdf: el.exchangeAccount,
              tdg: el.statusString
            };
          });
        }
      );
    },

    // 重置
    onReset() {
      this.chushihua();
      this.startTime = "";
      this.endTime = "";
      this.$refs.futouStyle.value = "";
      this.$refs.checkStyle.value = "";
    }
  },
  data() {
    return {
      ptime:'',
      status: null,
      checkType: null,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
      total: null,
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      currentCount: 0,
      pageSize: 10,
      startTime: null,
      endTime: null,
      tableData: [],
      list: [
        { key: "tda", title: "账号" },
        { key: "tdb", title: "手机" },
        { key: "tdc", title: "申请人" },
        { key: "tdd", title: "复投金额" },
        { key: "tde", title: "复投类型" },
        { key: "date", title: "申请时间" },                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
        { key: "tdf", title: "交易所账号" },
        { key: "tdg", title: "状态" }
      ]
    };
  }
};
</script>
<style lang='less' scoped>
@import "../../../static/common/capital.less";
</style>
<style>
.el-date-editor .el-range-input {
    width: 60% !important;
  }
.el-date-editor .el-range-separator {
    padding: 0!important;
  }
</style>